<template>
    <div>

        <div class="mytable">
            <!-- 搜索模块 -->
            <div class="search">
                <el-card>
                    <el-form :inline="true" :model="searchParams" class="demo-form-inline">
                        <el-form-item label="角色名称">
                            <el-input v-model="searchParams.keywords" placeholder="输入角色名称" clearable />
                        </el-form-item>
                        <el-form-item label="开始时间">
                            <el-date-picker v-model="searchParams.startDate" type="datetime" placeholder="选择时间" learable
                                format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" />
                        </el-form-item>
                        <el-form-item label="结束时间">
                            <el-date-picker v-model="searchParams.endDate" type="date" placeholder="选择时间" clearable
                                format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="getPageData">搜索</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </div>
            <!-- 添加按钮模块 -->
            <el-card class="gongju">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-button type="primary" @click="addItemHandler()"> 添加 </el-button>
                    </el-col>
                </el-row>
            </el-card>
            <!-- 角色表单模块 -->
            <el-card>
                <el-table :data="tableData" style="width: 100%">
                    <el-table-column fixed prop="id" label="角色ID" width="150" />
                    <el-table-column prop="name" label="角色名称" width="300" />
                    <el-table-column prop="code" label="角色编码" width="120" />
                    <el-table-column prop="status" label="角色状态" width="120" />
                    <el-table-column prop="sort" label="排序" width="120" />
                    <el-table-column prop="updateTime" label="更新时间" width="220" />
                    <el-table-column fixed="right" label="操作" min-width="120">
                        <template #default="{ row }">
                            <el-button link type="primary" size="small" @click="editItemHandler(row)">
                                修改
                            </el-button>
                            <el-button link type="primary" size="small" @click="delItemHadler(row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>

        </div>

        <!-- 分页页码模块 -->
        <div class="mypage">
            <el-pagination background layout="prev, pager, next" :total="pageParams.total"
                @change="pageChangeHandler" />
        </div>

        <!-- 弹框 -->
        <el-dialog v-model="dialogFormVisible" :title="ruleFormInfo.title" width="800">
            <RoleForm ref="ruleFormRef" :form-data="ruleForm" :disabled="isSBtnDisable" :loading="isSBtnLoding"
                :submitForm="submitForm"></RoleForm>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref, useTemplateRef } from 'vue'
import { type RolesType } from '@/service/types/type52'
import { requestGetRolesPage, requestPostRoles, requestPutRolesByRoleId, requestDeleteRolesByIds } from '@/service/study5/demo2'
import { ElMessage, ElMessageBox, type FormInstance } from 'element-plus'
import 'element-plus/theme-chalk/el-message.css'
import 'element-plus/theme-chalk/el-message-box.css'
import RoleForm from './components/RoleForm.vue'
import { isObject } from 'lodash'

const tableData = ref<RolesType[]>()
const pageParams = ref({
    pageNum: 1, //当前页
    pageSize: 15, //每页数量
    total: 0
})

const searchParams = ref({
    keywords: '',
    startDate: '',
    endDate: ''
})

// 是否显示 Dialog
const dialogFormVisible = ref(false)
const isSBtnLoding = ref(false)
const isSBtnDisable = ref(false)
const ruleFormRef = useTemplateRef('ruleFormRef')
const ruleForm = ref<RolesType>({
    code: '',
    createTime: '',
    name: '',
    sort: 1,
    status: 1
})
const ruleFormInfo = ref<{ type: 'add' | 'edit'; title: string }>({
    type: 'add',
    title: '添加数据'
})

// const locationOptions = ['Home', 'Company', 'School']

/**
 * 提交表单
 * @param formEl 表单组件对象
 */
const submitForm = async (formEl: FormInstance | undefined) => {
    isSBtnLoding.value = true
    isSBtnDisable.value = true

    if (!formEl) return
    await formEl.validate(async (valid, fields) => {
        if (valid) {
            let res

            try {
                ruleForm.value.id = Number(ruleForm.value.id)
                // 添加
                if (ruleFormInfo.value.type === 'add') {
                    // http请求
                    res = await requestPostRoles(ruleForm.value)
                }
                // 修改
                if (ruleFormInfo.value.type === 'edit') {
                    // http请求
                    res = await requestPutRolesByRoleId(ruleForm.value.id, ruleForm.value)
                }

                if (res!.code !== '2000') {
                    // throw new Error(ruleFormInfo.value.type === 'add'?`添加失败`:`修改失败`)
                    throw new Error(isObject(res?.msg) ? (res.msg as { Message: string })?.Message : res?.msg)
                }

                ElMessage.success(ruleFormInfo.value.type === 'add' ? `添加成功` : `修改成功`)
                getPageData()
            } catch (error: any) {
                ElMessage.error(error.message)
            } finally {
                isSBtnLoding.value = false
                isSBtnDisable.value = false

                // 关闭模态框
                dialogFormVisible.value = false
            }
        } else {
            console.log('error submit!', fields)
        }
    })
}

/**
 * 获取分页数据
 */
const getPageData = async () => {
    const resRoles = await requestGetRolesPage({
        // 分页参数
        pageNum: pageParams.value.pageNum,
        pageSize: pageParams.value.pageSize,
        // 检索的参数
        ...searchParams.value
    })
    console.log(resRoles, 'resRoles')

    tableData.value = resRoles.data.list
    pageParams.value.total = resRoles.data.total
}

/**
 * 添加数据
 */
const addItemHandler = async () => {
    dialogFormVisible.value = true
    // 重置表单数据
    ruleForm.value = JSON.parse(
        JSON.stringify({
            code: '',
            createTime: '',
            name: '',
            sort: 1,
            status: 1
        })
    )

    ruleFormInfo.value = {
        type: 'add',
        title: '添加角色'
    }
    ruleFormRef.value?.reset()
}

/**
 * 修改
 */
const editItemHandler = (row: RolesType) => {
    dialogFormVisible.value = true

    ruleFormInfo.value = {
        type: 'edit',
        title: '修改角色'
    }
    // 重置：填充表单
    ruleForm.value = JSON.parse(JSON.stringify(row))
    ruleFormRef.value?.reset()
}

const delItemHadler = (row: RolesType) => {
    ElMessageBox.confirm('确认删除?', 'Warning', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    })
        .then(async () => {
            try {
                const res = await requestDeleteRolesByIds(`${'324333'}`)

                if (res.code !== '2000') {
                    throw new Error(res.msg)
                }

                ElMessage({
                    type: 'success',
                    message: '删除成功'
                })
                getPageData()
            } catch (error: any) {
                ElMessage({
                    type: 'error',
                    message: error.message
                })
            }
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除'
            })
        })
}

onMounted(() => {
    getPageData()
})
// 分页事件
const pageChangeHandler = (currentPage: number, pageSize: number) => {
    pageParams.value.pageNum = currentPage
    pageParams.value.pageSize = pageSize
    getPageData()
}
</script>

<style lang="scss" scoped>
.search {
    // border: 1px solid var(--el-border-color);
}

.mytable {
    // margin: 10px 0;
    // border: 1px solid var(--el-border-color);
}

.mypage {
    margin: 10px 0;
    // border: 1px solid var(--el-border-color);
}

.gongju {
    margin: 10px 0;
}
</style>
